面向未来编程，如何在 Vue2 中使用 Vue3 的语法[实践篇]

#面向未来编程，如何在 Vue2 中使用 Vue3 的语法[实践篇]| 来源: 网络整理| 查看: 265

现已更名为 Vue Composition API

面向未来编程(Future-Oriented Programming)，vue-function-api 提供开发者在 Vue2.x 中使用 Vue3 的语法逻辑开发应用。(为方便以下以 Vue2 表示)

本文不对文档 api 对过多说明，仅讨论在项目实践中遇到的问题。比较两者的区别是对 Vue3 写法最快的了解，下面通过对比同一个功能在 Vue2 与 Vue3 的区别。

场景是这样的，一个列表页，上部分是条件筛选，下部分是 table，table 行内会有删除，修改（以 dialog 形式展示）功能，template 部分无区别，这里不做赘述。

准备工作

安装 vue-function-api

npm install vue-function-api --save # 或者 yarn add vue-function-api

在项目中引入 main.js

import Vue from 'vue' import Element from 'element-ui' import { plugin } from 'vue-function-api' // $store.getters.permissions) const canUpdate = () => permissions.includes('update') const canDelete = () => permissions.includes('delete') return { canUpdate, canDelete // { this.delete(id) }).catch(() => { this.$message({ type: 'info', message: '已取消' }) }) }, detail(id) { this.$router.push({ path: '/detail', query: { id } }) } } } created() { this.fetchCity() this.fetchList() } }

接下来看 Vue3 中实现

import { computed, onCreated } from 'vue-function-api' export default { setup(props, ctx) { const { $message, $router, $confirm, $store } = ctx.root // { const response = await fetchCityApi() citys.value = response.data // { const response = await fetchListApi(query.value) list.value = response.data }, const delete = async id => { const response = await deleteItem(id) const { status, msg } = response.data if (status !== 'ok') return $message.error(msg) $message({ type: 'success', message: '删除成功' }) }, confirm(id) { $confirm(`确认删除`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { delete(id) }).catch(() => { $message({ type: 'info', message: '已取消' }) }) }, detail(id) { $router.push({ path: '/detail', query: { id } }) } // lifecycle onCreated(() => { fetchCity() fetchList() }) return { fetchCity, fetchList, confirm, detail // { fetchList() }, { deep: true } ) // 或者 watch( () => query.value, val => { fetchList() }, { deep: true } ) // ... } }

通过以上对比，你应该对 Vue3 写法有一定理解了，因为是以一个列表页为 demo对比，没有用到 provide、 inject，想了解的同学可以到 provide, inject，还有 state 相当于 Vue.observable.

对比完整代码

Vue2

export default { data() { return { query: { city: null, name: null, status: null }, citys: [], list: [], statusMap: [{ value: 1, label: '启用' }, { value: 2, label: '禁用' }] } }, computed: { ...mapGetters(['permissions']), canUpdate() { return this.permissions.includes('update') }, canDelete() { return this.permissions.includes('delete') }, }, methods: { async fetchCity() { const response = await fetchCityApi() this.citys = response.data }, async fetchList() { const response = await fetchListApi(this.query) this.list = response.data }, async delete(id) { const response = await deleteItem(id) const { status, msg } = response.data if (status !== 'ok') return this.$message.error(msg) this.$message({ type: 'success', message: '删除成功' }) }, confirm(id) { this.$confirm(`确认删除`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.delete(id) }).catch(() => { this.$message({ type: 'info', message: '已取消' }) }) }, detail(id) { this.$router.push({ path: '/detail', query: { id } }) } }, created() { this.fetchCity() this.fetchList() }, watch: { query: { handler: function(val) { this.fetchList() }, { deep: true } } }

Vue3

import { value, computed, onCreated } from 'vue-function-api' export default { setup(props, ctx) { const { $store, $message, $router, $route } = ctx.root // reactive state const query = value({ city: null, name: null, status: null }) const citys = value([]) const list = value([]) const statusMap = value([{ value: 1, label: '启用' }, { value: 2, label: '禁用' }]) // computed const permissions = computed(() => $store.getters.permissions) const canUpdate = () => permissions.includes('update') const canDelete = () => permissions.includes('delete') // method const fetchCity = async () => { const response = await fetchCityApi() citys.value = response.data }, const fetchList = async () => { const response = await fetchListApi(query.value) list.value = response.data }, const delete = async id => { const response = await deleteItem(id) const { status, msg } = response.data if (status !== 'ok') return $message.error(msg) $message({ type: 'success', message: '删除成功' }) }, confirm(id) { $confirm(`确认删除`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { delete(id) }).catch(() => { $message({ type: 'info', message: '已取消' }) }) }, detail(id) { $router.push({ path: '/detail', query: { id } }) } // watch watch( query, val => { fetchList() }, { deep: true } ) // lifecycle onCreated(() => { fetchCity() fetchList() }) return { query, citys, list, statusMap, canUpdate, canDelete, fetchCity, fetchList, confirm, detail } } } 最后

这里贴一下 setup 中的第二个参数 context，对象中的属性是 2.x 中的 vue 实例属性的一个子集。完整的属性列表：

parentrootrefsslotsattrsemit

像其他库 vuex，vue-router，ElementUI 的一些 $方法可以从 root 中取得

export default { setup(props, ctx) { const { $store, $router, $route, $message, $confirm } = ctx.root } } 最后的最后

笔者已用到正式环境，目前来看还没有什么问题，引用 vue-function-api 官方的说明

vue-function-api 会一直保持与 Vue3.x 的兼容性，当 3.0 发布时，您可以无缝替换掉本库。 vue-function-api 的实现只依赖 Vue2.x 本身，不论 Vue3.x 的发布与否，都不会影响您正常使用本库。由于 Vue2.x 的公共 API 限制，vue-function-api 无法避免的会产生一些额外的内存负载。如果您的应用并不工作在极端内存环境下，无需关心此项。

【本文地址】

公司简介

联系我们